<template>
  <view class="userInfo">
    <view class="infoItem">
      <view class="label">续租开始时间</view>
      <view class="value" @tap="onDisplay('leaseStartTime')">{{ formatDate(leaseInfo.leaseStartTime) }}</view>
    </view>
    <view class="infoItem">
      <view class="label">续租结束时间</view>
      <view class="value" @tap="onDisplay('leaseEndTime')">{{ formatDate(leaseInfo.leaseEndTime) }}</view>
    </view>
    <uni-calendar ref="calendar" :insert="false" @confirm="onConfirm" />

    <view class="infoItem">
      <view class="label">房间编号</view>
	  <input class="value" type="text" v-model="leaseInfo.houseId" />
  
    </view>
    <view class="infoItem">
      <view class="label">原合同编号</view>
	  	  <input class="value" type="text" v-model="leaseInfo.contractId" />
    </view>

    <button class="submitButton" type="primary" @tap="submit">
      提交
    </button>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';


const leaseInfo = reactive({
  leaseId: '1',
  leaseStartTime: '',
  leaseEndTime: '',
  houseId: '#we',
  contractId: '#rwer1',
});

const show = ref(false);
const calendarType = ref('');
const calendar = ref(null);

const onDisplay = (type: string) => {
	calendar.value.open();
  calendarType.value = type;
};

const onClose = () => {

};

const formatDate = (date: string) => {
  return date !== ''
    ? `${new Date(date).getFullYear()}/${new Date(date).getMonth() + 1}/${new Date(date).getDate()}`
    : '请选择';
};

const onConfirm = (event) => {
	console.log(event)
  const newDate = event.fulldate;
  if (calendarType.value === 'leaseStartTime') {
    leaseInfo.leaseStartTime = newDate;
  } else if (calendarType.value === 'leaseEndTime') {
    leaseInfo.leaseEndTime = newDate;
  }
  show.value = false;
};

const submit = () => {
	console.log(leaseInfo)
  uni.navigateTo({
    url: "/pages/prompt/prompt?msg=续租已提交"
  });
};
</script>

<style scoped>
.userInfo {
  padding: 20upx;
  font-size: 14px;
  background-color: #fff;
  border-radius: 5px;
}

.infoItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  height: 30px;
  border-bottom:1px solid #f4f4f4 ;
}

.label {

  color: #333;
}

.value {
 
  color: #666;
  cursor: pointer;
}

.submitButton {
  margin-top: 40upx;
}
</style>
